<!--这是微信推送组件-->
<template>
  <div>
    <p class="filter"></p>
    <div class="messageBox" v-loading="formLoading">
      <h3 class="fixTitle">
        <span>微信推送</span>
        <p>
          <em style="cursor: pointer;" @click="close"><svg-icon icon-class="cha" class="font-size16" /></em>
        </p>
      </h3>
      <el-form :model="postForm" :rules="rules" ref="postForm" label-width="150px" label-position="right" style="margin-top: 50px;">
        <el-form-item label="推送内容：" prop="content">
          <el-input v-model="postForm.content" placeholder="请输入活动内容" style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item label="活动名称：">
          <el-input v-model="postForm.title"  :disabled="true" placeholder="请输入名称" style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item label="活动地点：" prop="address">
          <el-input v-model="postForm.address"  placeholder="请输入地点" style="width: 350px"></el-input>
        </el-form-item>

        <!--<el-form-item label="报名时间：">-->
          <!--<el-date-picker v-model="postForm.signTime" class="filter-item" type="datetime" clearable placeholder="请选择报名时间" style="width: 350px">-->
          <!--</el-date-picker>-->
        <!--</el-form-item>-->
        <el-form-item label="讲师：">
          <el-input v-model="postForm.teacher" style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item label="活动时间：">
          <el-input v-model="postForm.createdAt"  :disabled="true" style="width: 350px"></el-input>
        </el-form-item>
        <!--<el-form-item label="活动时间：">-->
          <!--<el-date-picker v-model="postForm.createdAt" value-format="yyyy-MM-dd HH:mm:ss" class="filter-item" type="datetime" clearable placeholder="请选择课程时间" style="width: 350px">-->
          <!--</el-date-picker>-->
        <!--</el-form-item>-->
        <el-form-item label="推送时间：" prop="pushTime">
          <el-date-picker :picker-options="pickerOptions" v-model="postForm.pushTime" class="filter-item" type="datetime" clearable placeholder="请选择推送时间" style="width: 350px">
          </el-date-picker>
        </el-form-item>
        <p style="text-align: center;">
          <el-button type="primary" v-loading="btnLoading" icon="el-icon-check" @click="submitForm">确认</el-button>
          <el-button type="info" @click="close">取消</el-button>
        </p>
      </el-form>
    </div>
  </div>
</template>
<script>
  import { wxPush } from '@/api/activities'

  const postForm = {
    title: null, // 活动名
    address: null,
    createdAt: null, // 活动时间
    pushTime: '', // 活动推送时间
    teacher: '',
    activityId: '',
    content: '您好，您有新的活动可以体验'
  }

  const validateTime = (rule, value, callback) => {
    if (!value) {
      callback('请输入推送时间')
    } else {
      const currentTime = Date.parse((new Date())) - 60 * 1000
      if (value < currentTime) {
        callback('推送时间不能小于当前时间')
      }
    }
    callback()
  }

  const rules = {
    content: [{ required: true, message: '推送内容不能为空', trigger: 'blur' }],
    address: [{ required: true, message: '活动地点不能为空', trigger: 'blur' }],
    pushTime: [{ required: true, trigger: 'blur', validator: validateTime }]
  }

  export default {
    props: ['tuisongData'],
    mounted() {
      this.postForm.title = this.tuisongData[0].name
      this.postForm.address = this.tuisongData[0].place
      // this.postForm.signTime = this.tuisongData[0].activeDate
      this.postForm.createdAt = this.tuisongData[0].enrollDate
      this.postForm.activityId = this.tuisongData[0].activityId
      this.postForm.pushTime = new Date()
    },
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now()
          } },
        postForm: Object.assign({}, postForm),
        activeId: null,
        rules,
        btnLoading: false,
        formLoading: false
      }
    },
    methods: {
      close() {
        this.$emit('hideWechatPush', false)
      },
      submitForm() {
        this.$refs.postForm.validate(valid => {
          if (valid) {
            this.$confirm('此操作将微信推送该活动, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              center: true
            }).then(() => {
              this.btnLoading = true
              this.formLoading = true
              wxPush(this.postForm).then(res => {
                if (res.data.statusCode == 200) {
                  this.btnLoading = false
                  this.formLoading = false
                  this.$message({
                    type: 'success',
                    message: '推送中，群发时间较长，请耐心等候!'
                  })
                  this.close()
                } else {
                  this.btnLoading = false
                  this.formLoading = false
                  this.$message({
                    type: 'error',
                    message: res.data.msg
                  })
                }
              }).catch(err => {
              	this.btnLoading = false
              	this.formLoading = false
                console.log(err)
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消推送'
              })
            })
          }
        })
      }
    }
  }
</script>
<style scoped>
  h3,p {padding: 0;margin: 0;}
  .fixTitle{
    width: 600px;
    padding-left: 20px;
  }
  .messageBox {
    width: 600px;
    height: 450px;
    margin: 0 20px;
    overflow: auto;
    background: #fff;
    position: fixed;
    left: 30%;
    top: 15%;
    z-index: 200;
  }
</style>
